<template>
	<view class="time">
		<picker mode="multiSelector" @change="change" @tap="initTime" @columnchange="columnchange" :value="multiIndex" :range="lang ? multiArray : multiArrayC">
			<view class="time_item">
				<view class="time_item_date">
					<text>{{date}}</text>
				</view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				multiArray:[],//时间数据
				multiArrayC:[],//带中文时间数据
				multiIndex:[],//选择器当前的值
				year:0,
				month:0,
				day:0,
				hour:0,
				minute:0,
				second:0,
				timeType:0,//时间粒度   5-->year (1970) 4-->0month (1970-01) 3-->day (1970-01-01) 2-->hour (1970-01-01 00) 1--> minute(1970-01-01 00:00) 0--> second(1970-01-01 00:00:00)
				date:"",//展示的时间
				nowYear:0,
				nowMonth:0,
				nowDay:0,
				nowHour:0,
				nowMinute:0,
				nowSecond:0,
				begin:true,
				returnJson:{
					date:""
				}
			}
		},
		props:{
			fields:{
				type:String,
				default:"",
			},
			lang:{
				type:Boolean,
				default:true
			},
			time:{
				type:String,
				default:"1"
			},
			inputName:{
				type:String,
				default:'时间'
			},
			showTime:{
				type:Boolean,
				default:true
			}
		},
		created(){
			if(this.begin){
				let that = this;
				setTimeout(function(){
					that.returnJson.inputName = that.inputName
					that.initTimeType();
				},100);
			}
		},
		methods:{
			change(e){
					this.multiIndex = e.detail.value;
					let dateData = [],multiArray = this.multiArray;
					this.date = "";
					if(this.timeType >= 0){this.date += multiArray[0][e.detail.value[0]];dateData.push(this.nowYear);}
					if(this.timeType >= 1){this.date += "-" + multiArray[1][e.detail.value[1]];dateData.push(this.nowMonth);}
					if(this.timeType >= 2){this.date += "-" + multiArray[2][e.detail.value[2]];dateData.push(this.nowDay);}
					if(this.timeType >= 3){this.date += " " + multiArray[3][e.detail.value[3]];dateData.push(this.nowHour);}
					if(this.timeType >= 4){this.date += ":" + multiArray[4][e.detail.value[4]];dateData.push(this.nowMinute);}
					if(this.timeType >= 5){this.date += ":" + multiArray[5][e.detail.value[5]];dateData.push(this.nowSecond);}
					this.returnJson.date = this.date;
					this.returnJson.dateData = dateData;
					this.$emit("getDate",this.returnJson)
			},
			columnchange(e){//滚动触发时改变数据展示
				if(e.detail.column == 1){
					this.nowMonth = Number(e.detail.value) + 1;
					this.dealDayIntoArr();
				}else if(e.detail.column == 0){
					this.nowYear = this.multiArray[0][e.detail.value];
					this.dealDayIntoArr();
				}else if(e.detail.column == 2){
					this.nowDay = Number(e.detail.value) + 1;
				}else if(e.detail.column == 3){
					this.nowHour = e.detail.value;
				}else if(e.detail.column == 4){
					this.nowMinute = e.detail.value;
				}else if(e.detail.column == 5){
					this.nowSecond = e.detail.value;
				}
			},
			initTimeType(){
				if(this.fields == "year"){
					this.timeType = 0;
				}else if(this.fields == "month"){
					this.timeType = 1;
				}else if(this.fields == "day"){
					this.timeType = 2;
				}else if(this.fields == "hour"){
					this.timeType = 3;
				}else if(this.fields == "minute"){
					this.timeType = 4;
				}else{
					this.timeType = 5;
				}
				this.initTime();
			},
			initTime(){//初始化时间数据
				let time = "";
				if(this.time == undefined) return;
				if(this.time != "1" && this.time != "" && this.time != null){
					time = this.time.split("-");
					time.length == 2 ? time = time[0] : time = time[0] + '/' + time[1] + '/' + time[2];
					time = new Date(time);
				}else{
					time = new Date;
				}
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let day = time.getDate();
				let hour = time.getHours();
				let minute = time.getMinutes();
				let second = time.getSeconds();
				this.nowYear = year;this.nowMonth = month;this.nowDay = day;this.nowHour = hour;this.nowMinute = minute;this.nowSecond = second;
				let multiIndex = [];
				if(this.timeType >= 0)multiIndex.push(0);
				if(this.timeType >= 1)multiIndex.push(month - 1);
				if(this.timeType >= 2){multiIndex.push(day - 1);}
				if(this.timeType >= 3){multiIndex.push(hour);}
				if(this.timeType >= 4){multiIndex.push(minute);}
				if(this.timeType >= 5){multiIndex.push(second)}
				
				this.multiIndex = multiIndex;
				this.year = year;this.month = month;this.day = day;this.hour = hour;this.minute = minute;this.second = second;
				month = this.dealString(month);day = this.dealString(day);hour = this.dealString(hour);minute = this.dealString(minute);second = this.dealString(second);
				this.date = "";
				if(this.timeType >= 0){this.date += year;}
				if(this.timeType >= 1){this.date += "-" + month;}
				if(this.timeType >= 2){this.date += "-" + day;}
				if(this.timeType >= 3){this.date += " " + hour;}
				if(this.timeType >= 4){this.date += ":" + minute;}
				if(this.timeType >= 5){this.date += ":" + second;}
				this.returnJson.date = this.date;
				this.computeTime();
			},
			computeTime(){//事件处理
				let multiArray = [],multiArrayC = [];
				// ******************************年份数据****************************************
				let yearArr = [],yearCArr = [];
				for(let i = 0;i<50;i++){
					yearArr.push(this.year + i);
					yearCArr.push((this.year + i) + "年");
				}
				// ******************************月份数据*****************************************
				let monthArr = [],monthCArr = [];
				for(let i = 0;i<12;i++){
					monthArr.push(this.dealString(i + 1));
					monthCArr.push(this.dealString(i + 1) + "月");
				}
				// ******************************天数数据*****************************************
				let dayArr = [],dayCArr = [];
				for(let i = 0;i<this.dealDay(this.year,this.month);i++){
					dayArr.push(this.dealString(i + 1));
					dayCArr.push(this.dealString(i + 1) + "日");
				}
				// ******************************小时数据******************************************
				let hourArr = [],hourCArr = [];
				for(let i = 0;i<24;i++){
					hourArr.push(this.dealString(i));
					hourCArr.push(this.dealString(i) + "时");
				}
				// ******************************分钟数据******************************************
				let minuteArr = [],minuteCArr = [];
				for(let i = 0;i<60;i++){
					minuteArr.push(this.dealString(i));
					minuteCArr.push(this.dealString(i) + "分");
				}
				// ******************************秒钟数据******************************************
				let secondArr = [],secondCArr = [];
				for(let i = 0;i<60;i++){
					secondArr.push(this.dealString(i));
					secondCArr.push(this.dealString(i)+ "秒");
				}
				if(this.timeType >= 0){multiArray.push(yearArr);multiArrayC.push(yearCArr);}
				if(this.timeType >= 1){multiArray.push(monthArr);multiArrayC.push(monthCArr);}
				if(this.timeType >= 2){multiArray.push(dayArr);multiArrayC.push(dayCArr);}
				if(this.timeType >= 3){multiArray.push(hourArr);multiArrayC.push(hourCArr);}
				if(this.timeType >= 4){multiArray.push(minuteArr);multiArrayC.push(minuteCArr);}
				if(this.timeType >= 5){multiArray.push(secondArr);multiArrayC.push(secondCArr);}
				this.multiArray = multiArray;
				this.multiArrayC = multiArrayC;
				if(this.begin && this.showTime){
					this.$emit("getDate",this.returnJson)
				}else{
					this.date = "请选择开始时间";
					this.$emit("getDate","")
				}
				this.begin = !this.begin;
			},
			dealString(num){//将数字处理成两位数
				return num < 10 ? "0" + num : "" + num;
			},
			dealDay(year,month){//处理每月天数
				let day = 0;
				if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
					day = 31;
				}else if(month == 4 || month == 6 || month == 9 || month == 11){
					day = 30;
				}else{
					if(year % 100 == 0){
						year % 400 == 0 ? day = 29 : day = 28;
					}else{
						year % 4 == 0 ? day = 29 : day = 28;
					}
				}
				return day;
			},
			dealDayIntoArr(){//处理滑动时天数变化
				let dayArr = [],dayCArr = [];
				for(let i = 0;i<this.dealDay(this.nowYear,this.nowMonth);i++){
					dayArr.push(this.dealString(i + 1));
					dayCArr.push(this.dealString(i + 1) + "日");
				}
				this.multiArray.splice(2,1,dayArr);
				this.multiArrayC.splice(2,1,dayCArr);
			}
		}
	} 
</script>

<style>
	.time{width: 100%;height:90upx;padding: 0 30upx;box-sizing: border-box;}
	.time_item{display: flex;flex-direction: row;width: 100%;height:90upx;box-sizing: border-box;align-items: center;font-size: 30upx;
		/* color: #333; */
		justify-content: space-between;
		/* color: #333333; */
		border-bottom: 0upx solid #EEEEEE;}
	.time_item_date{display: flex;flex-direction: row;align-items: center;margin-left: auto;}
	.time_item_date text{line-height: 0;
		/* color: #666; */
	}
	.right{margin-right: 0;}
</style>
